<template>
	<view class="">
		<view class="musicBar" :style="`background-color: ${bgcolor};`">
			<view class="musicName">
				<view class="musicName-img">
					<u-image height="70rpx" width="70rpx" :src="musicInfo.al.picUrl" v-if="musicInfo.al" shape="circle"></u-image>
				</view>
				<view class="musicName-text" @click="toMusicController">
					<view class="mainTitle">
						{{musicInfo.name}}
						<text style="color: #a0a0a0;" v-if="musicInfo.tns">({{musicInfo.tns[0]}})</text>
					</view>
					<view class="smallTitle">
						{{musicInfo.ar[0].name}}
						<template v-if="musicInfo.ar[1]">
							/{{musicInfo.ar[1].name}}
						</template>
					</view>
				</view>
			</view>
			<u-icon :name="iconState" color="#4d4d4d" size="70" @click="playClick"></u-icon>
			<u-icon name="list-dot" color="#4d4d4d" size="64" style="margin-right: 30rpx;" @click="clickShowPopup"></u-icon>
		</view>
		<!-- 弹出层 -->
		<view class="">
			<u-popup v-model="showPopup" mode="bottom">
				<view style="height: 800rpx;">
					人生若只如初见，何事秋风悲画扇。
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bgcolor: {
				type: String,
				default: '#f8f7f7'
			},
			// 歌曲信息
			musicInfo: {
				type: Object
			},
			playListId:{
				type:String
			}
		},
		watch: {
			musicInfo: {
				handler(newVal) {
					// console.log('歌单ID：', this.playListId)
					this.musicId = newVal.id;
					this.getMusicUrl(newVal.id);
				},
				// 立即先去执行handler方法
				immediate: true
			},
			// 监听音乐 url
			musicUrl: {
				handler(newVal) {
					// console.log(newVal);
					// 暂停音乐
					this.$store.commit('musicestroy');
					// 播放音乐
					this.$store.commit('musicInit',newVal);
				},
				// 立即先去执行handler方法
				immediate: true
			}
		},
		computed: {
			// 根据播放状态来切换icon
			iconState: function() {
				return this.$store.state.playState ? 'pause-circle' : 'play-circle';
			}
		},
		onLoad() {},
		data() {
			return {
				playIcon: 'play-circle',
				// 控制弹出层
				showPopup: false,
				musicUrl: '',
				// 歌曲 ID
				musicId: 0
			}
		},
		methods: {
			playClick() {
				if (this.$store.state.playState) {
					// 暂停播放
					this.$store.commit('upDataPlayState', false);
					this.$store.state.innerAudioContext.pause();
				} else {
					// 播放音乐
					this.$store.commit('upDataPlayState', true);
					this.$store.state.innerAudioContext.play();
				}
			},

			// 获取音乐url
			getMusicUrl(id) {
				this.myRequest({
					url: this.api.songUrl,
					data: {
						id: id
					}
				}).then(res => {
					// console.log(res.data.data[0]);
					this.musicUrl = res.data.data[0].url;
				})
			},
			
			// 跳转页面到音乐控制器页面
			toMusicController() {
				uni.reLaunch({
					url: `/pages/musicController/musicController?playListId=${this.playListId}&musicId=${this.musicId}`
				});
			},

			clickShowPopup() {
				this.showPopup = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.musicBar {
		width: 100%;
		height: 100rpx;
		background-color: #f8f7f7;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		border-top: 1px solid #e6e6e6;

		.musicName {
			width: 70%;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.musicName-img {
				width: 14%;
				height: 100%;
				display: flex;
				align-items: center;
				margin-left: 6%;
			}

			.musicName-text {
				width: 80%;
				height: 100%;
				margin-left: 4%;

				.mainTitle {
					margin-top: 10rpx;
					font-weight: bold;
					// 文字过长自动换行
					word-break: break-all;
					white-space: normal;
					text-align: left;
					// 文字过长，显示省略号
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.smallTitle {
					color: #818181;
					// 文字过长自动换行
					word-break: break-all;
					white-space: normal;
					text-align: left;
					// 文字过长，显示省略号
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}


	}
</style>
